<template>
	<view class="main" :style="'top:'+(-demo.height-demo.top-10)+'px'">
		<view class="fixed_head">
			<head1 class="nav_top"
				:style="'height:' +  demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10px'"
				:nav="title">
			</head1>
		</view>
		<view class="edit_info" :style="'padding-bottom:'+(demo.height+demo.top+10)+'px'">
			<view class="edit_info_top dis_center" :style="'margin-top:'+(demo.height+demo.top+10)+'px'">
				<image v-if="formData.photo==''" @click="chooseTheImg" src="../../static/icon/zhaopinmain.png"
					mode="" />
				<image v-if="formData.photo!=''" @click="chooseTheImg" :src="webImgUrl+formData.photo" mode="" />
				<view @click="chooseTheImg">点击上传真实头像</view>
			</view>
			<view class="edit_main">
				<view class="edit_form" v-model="formData">
					<view class="edit_form_list">
						<view class=""><text class="xingxing">*</text>姓名</view>
						<input class="edit_input" type="text" name="formData.personName" v-model="formData.personName"
							placeholder="请输入真实姓名" />
						<!-- <view class="tishi" v-if="formData.personName==''">*请先输入姓名</view> -->
					</view>
					<view class="edit_form_list edit_listAge">
						<view class="edit_form_listAge"><text class="xingxing">*</text><text>出生日期</text></view>
						<view class="edit_form_age">
							<picker mode="date" :value="age" :start="startDate" :end="endDate"
								@change="bindDateChangeStr">
								<view class="uni-input" v-if="formData.age=='' || formData.age==null">请选择</view>
								<view class="uni-input" v-if="formData.age!='' && formData.age!=null">{{formData.age}}
								</view>
							</picker>
							<image src="../../static/icon/youjiantou.png" mode=""></image>
						</view>
					</view>
					<view class="edit_form_list edit_listAge">
						<view class="edit_form_listAge"><text class="xingxing">*</text><text>参加工作时间</text></view>
						<view class="edit_form_age">
							<picker mode="date" :value="background" :start="startDate" :end="endDate"
								@change="bindDateChangeBackground">
								<view class="uni-input" v-if="formData.background=='' || formData.background==null">请选择
								</view>
								<view class="uni-input" v-if="formData.background!='' && formData.background!=null">
									{{formData.background}}
								</view>
							</picker>
							<image src="../../static/icon/youjiantou.png" mode=""></image>
						</view>
					</view>
					<view class="edit_form_list">
						<view class=""><text class="xingxing"></text>职称</view>
						<input class="edit_input" type="text" name="formData.title" v-model="formData.title"
							placeholder="请输入职称" />
					</view>
					<view class="edit_form_list">
						<view class=""><text class="xingxing">*</text>联系方式</view>
						<input class="edit_input" type="text" name="formData.tel"  v-model="formData.tel"
							placeholder="请输入手机号"/>
					</view>
					<view class="edit_form_list dis_flex bb_bottom_list">
						<view class=""><text class="xingxing"></text>学历</view>
						<view class="b_bottom_list ">
							<picker :value="xlIndex" :range="education" range-key="meaning" @change="xlChange">
								<text>{{education[xlIndex].meaning}}</text>
							</picker>
							<image src="../../static/icon/youjiantou.png" mode=""></image>
						</view>
					</view>
					<view class="edit_form_list">
						<view class=""><text class="xingxing">*</text>学校</view>
						<input class="edit_input" type="text" name="formData.school" v-model="formData.school"
							placeholder="请输入学校" />
					</view>
					<view class="edit_form_list">
						<view class=""><text class="xingxing">*</text>专业</view>
						<input class="edit_input" type="text" name="formData.major" v-model="formData.major"
							placeholder="请输入专业" />
					</view>

					<view class="edit_form_list">
						<view class=""><text class="xingxing"></text>简介</view>
						<input class="edit_input" type="text" name="formData.introduction"
							v-model="formData.introduction" placeholder="请输入简介" />
						<!-- <view class="tishi" v-if="formData.introduction==''">*请先输入简介</view> -->
					</view>

					<view class="save dis_center" @click="save(formData)">
						保存
					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import head1 from '../../common/head/head'
	export default {
		components: {
			head1,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: '个人信息修改',
				demo: {
					top: '',
					height: ''
				},
				webImgUrl: '',
				education: [],
				xlIndex: 2,
				age: currentDate,
				background: currentDate,
				formData: {
					// resumeId: '',
					// personName: "",
					// title: "",
					education: "",
					// major: "",
					// school: "",
					// introduction: "",
					age: "",
					background: '',
					needTel:true
				},
			}
		},
		onLoad(option) {
			this.formData = JSON.parse(decodeURIComponent(option.data))
			// 默认渲染传过来的学历
			for (var i = 0; i < this.education.length; i++) {
				if (this.education[i].enumValue == this.formData.education) {
					this.xlIndex = i
				}
			}
			this.formData.education = '211003'
		},
		computed: {
			EduList() {
				return this.$store.state.education
			},
			startDate() {
				return this.getDate('start');
			},
		},
		created() {
			const demo = uni.getMenuButtonBoundingClientRect()
			this.demo.top = demo.top
			this.demo.height = demo.height
			// 学历下拉列表
			this.education = this.EduList.education
			// 获取图片前缀
			this.webImgUrl = this.$webUrl
			// 默认学历
			this.formData.education = this.EduList.education[0].enumValue

		},

		methods: {
			test() {
				this.$forceUpdate()
			},
			sub(formData) {},
			// 上传头像
			chooseTheImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.chuanjianbao.com/buildtreasure/news/pucture/fileup', //post请求的地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: { //请求头可自定义
								'Content-Type': 'application/json;charset=UTF-8',
								// 'X-Access-Token': TOKEN
								'Cookie': 'JSESSIONID=' + uni.getStorageSync('sessionId')
							},
							formData: {
								fileType: 'photo',
								file: tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								// uni.showToast({
								// 	title:'头像上传成功'
								// })
								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								this.formData.photo = JSON.parse(uploadFileRes.data).data
								this.test()
							}
						})
					}
				})
			},
			xlChange(e) {
				this.xlIndex = e.target.value;
				let val = e.target.value
				// 选择的当前值赋给提交的表单
				this.formData.education = this.education[Number(val)].enumValue

			},
			// 日期校验
			compare(date1, date2) {
				let dates1 = new Date(date1);
				let dates2 = new Date(date2);
				if (dates1 > dates2) {
					return true
				} else {
					return false
				}
			},
			save(data) {
				var formData = this.formData;
				let checkPhone = /^1[3-9]\d{9}$/;
				if (formData.personName == '' || formData.personName == null) {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none'
					})
				} else if (formData.age == '' || formData.age == null) {
					uni.showToast({
						title: "出生日期不能为空",
						icon: 'none'
					})


				} else if (this.compare(formData.age, this.age)) {
					uni.showToast({
						title: '请选择有效的出生日期',
						icon: 'none'
					})
				} else if (formData.background == '' || formData.background == null) {
					uni.showToast({
						title: "参加工作时间不能为空",
						icon: 'none'
					})


				} else if (this.compare(formData.background, this.background)) {
					uni.showToast({
						title: '请选择有效的参加工作时间',
						icon: 'none'
					})
				} 
				else if (this.compare(formData.age, formData.background)) {
					uni.showToast({
						title: '参加工作时间不能早于出生日期',
						icon: 'none'
					})
				} 
				else if (formData.tel == '' || formData.tel == null) {
					uni.showToast({
						title: "联系方式不能为空",
						icon: 'none'
					})
				}else if (checkPhone.test(this.formData.tel) == false) {
					uni.showToast({
						title: '手机号码格式不正确',
						icon: 'none'
					})
					return;
				}
				else if (formData.school == '' || formData.school == null) {
					uni.showToast({
						title: "学校不能为空",
						icon: 'none'
					})
				} else if (formData.major == '' || formData.major == null) {
					uni.showToast({
						title: "专业不能为空",
						icon: 'none'
					})
				} else {
					let userId = uni.getStorageSync('userId')
					// 刷新简历匹配度
					this.$myResquest.phoneInfo({
						userId: userId
					}).then(res => {})
					// 保存简历
					this.$myResquest.setResumePut(data).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "提交成功"
							})
							setTimeout(() => {
								// 获取页面栈
								let pages = getCurrentPages()
								// 获取上一页栈
								let prevPage = pages[pages.length - 2]
								prevPage.$vm.test()
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'error'
							})
						}
					})
				}
			},
			bindDateChangeStr: function(e) {
				this.formData.age = e.target.value
				this.timeIndexStart = 1
			},
			bindDateChangeBackground: function(e) {
				this.formData.background = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		.fixed_head {
			position: fixed;
			z-index: 9999;
		}

		.nav_top {
			position: relative;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-width: 750rpx;
		}

		.edit_info {
			height: 100%;
			overflow: auto;
			background: #f7f7f7;
			box-sizing: border-box;

			.edit_info_top {
				width: 750rpx;
				height: 212rpx;
				background: #5dd1ce;

				>image {
					width: 116rpx;
					height: 116rpx;
					border-radius: 50%;
					margin-top: 22rpx;
				}

				>view {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 400;
					text-align: left;
					color: #f7f7f7;
					line-height: 35rpx;
					margin-top: 16rpx;
				}
			}

			.edit_main {

				.edit_form {
					background: #f7f7f7;

					.edit_form_list {
						position: relative;
						padding: 20rpx 66rpx;
						background: #ffffff;
						margin-bottom: 20rpx;

						>view {
							font-size: 33rpx;
							font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
							font-weight: bold;
							text-align: left;
							color: #5dd1ce;
							line-height: 35rpx;
							display: flex;
						}

						.b_bottom_list {
							display: flex;
							align-items: center;

							text {
								position: absolute;
								right: 22rpx;
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: right;
								color: #999999;
								width: 100%;
								/* background: pink; */
								top: 29%;
								padding: 0 66rpx;
							}

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}

						.edit_input {
							padding: 15rpx 2rpx 15rpx 18rpx;
							box-sizing: content-box;
						}

						.tishi {
							position: absolute;
							right: 0;
							top: 34rpx;
							color: red;
							margin-bottom: 50rpx;
						}
						.edit_form_listAge{
							>text{
								display: flex;
							}
						}
						
					}

					.edit_listAge {
						display: flex;
						padding: 20rpx 66rpx;

						.edit_form_age {
							display: flex;
							position: absolute;
							right: 0;
							width: 100%;
							/* text-align: right; */
							justify-content: flex-end;
							align-items: center;
							padding: 0 66rpx;

							picker {
								width: 100%;
								text-align: right;
								color: #999999;
								font-weight: normal;
							}

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}

					.bb_bottom_list {
						padding: 20rpx 66rpx;
					}

					.save {
						width: 600rpx;
						height: 88rpx;
						background: #5cd1ce;
						border-radius: 44rpx;
						margin: 52rpx auto;
						color: #ffffff;
					}
				}
			}
		}
		.xingxing{
			    width: 20rpx;
			    height: 34rpx;
			    display: block;
		}
	}
</style>
